<script setup lang="ts">
import {useRouter} from 'vue-router'
const router = useRouter()
function goPersonal(){
  router.push({name:'home'})
}

</script>
<template>
  <div id="outer">
    <!-- to的字符串写法 -->
    <!-- <router-link to="/">首页</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link to="/about">关于我们</router-link> -->

    <!-- to的对象写法 -->
    <router-link active-class="active" :to="{name:'home'}">首页</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link name="ab" active-class="active" :to="{name:'about'}">关于我们</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link active-class="active" :to="{name:'news'}">新闻</router-link>

    <!--
    <router-link :to="{path:'/'}">首页</router-link>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link :to="{path:'/about'}">关于我们</router-link>-->


    <img class="nav_img" @click="goPersonal" src="https://flower-java.oss-cn-beijing.aliyuncs.com/flower_image/flower%20%281%29.jpeg?Expires=1758267405&OSSAccessKeyId=TMP.3Kt8XwsZYYyvaoJrEmPQWQRNK3Et5sWiwAbma2TLW9Gmx9dHyaU5fK4U8eyutATqg8SRKph2bYsTybTJVNGEopfNbLSD9K&Signature=%2FUi0Mkx1jsqD3czao6UfyBRlKMQ%3D">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <router-link active-class="active" to="/login">登录</router-link>
  </div>
  
</template>
<style scoped>

  .nav_img{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    cursor: pointer;/* 鼠标悬停时，改变鼠标指针的形状 */
  }
  #outer a{
    text-decoration: none;/*去除a标签默认样式，去除下划线*/
    color:red;

  }
  #outer .active{
    color:green;
  }
  
</style>